import React from 'react'
import { useContext } from 'react';
import { Context } from '../../App';

export default function CourseTableCell({ getCellInfor, courseCell }) {

  const { role } = useContext(Context)

  // const dataArray = generateData();
  // let one = dataArray.filter((item) => item.section === 1).sort((a, b) => a.day - b.day)
  // let two = dataArray.filter((item) => item.section === 2).sort((a, b) => a.day - b.day)
  // let three = dataArray.filter((item) => item.section === 3).sort((a, b) => a.day - b.day)
  // let four = dataArray.filter((item) => item.section === 4).sort((a, b) => a.day - b.day)
  // let five = dataArray.filter((item) => item.section === 5).sort((a, b) => a.day - b.day)
  // let six = dataArray.filter((item) => item.section === 6).sort((a, b) => a.day - b.day)
  // let seven = dataArray.filter((item) => item.section === 7).sort((a, b) => a.day - b.day)
  // let eight = dataArray.filter((item) => item.section === 8).sort((a, b) => a.day - b.day)
  // let nine = dataArray.filter((item) => item.section === 9).sort((a, b) => a.day - b.day)
  // let ten = dataArray.filter((item) => item.section === 10).sort((a, b) => a.day - b.day)
  // // 使用 双map 遍历
  // let newDataArray = [one,two,three,four,five,six,seven, eight, nine, ten]
  // // 使用 map 遍历
  // let newDataArray2 = [...one,...two, ...three, ...four, ...five, ...six, ...seven, ...eight, ...nine, ...ten]


  // 角色样式
  const style = {
    changeStyle: role?.fd_type === "teacher" ? "changeStyle" : ""
  }

  return (
    <>
      {
        role?.fd_type === "teacher" ?
          courseCell?.map((item, index) => {
            return <div className={`course-table-cell ${style.changeStyle}`} onClick={() => getCellInfor(item)} key={index}>
              <p>
                {!item.fd_name ? "" : `${item.fd_name}`}
              </p>
              <p>
                {!item.fd_curriculumName ? "" : `${item.fd_curriculumName}`}
              </p>
              <p>
                {!item.fd_classRoomName ? "" : `${item.fd_classRoomName}---`}
                {!item.fd_claName ? "" : `${item.fd_claName}`}
              </p>
            </div>
          }) :
          courseCell?.map((item, index) => {
            return <div className={`course-table-cell ${style}`} key={index}>
              <p>
                {!item.fd_name ? "" : `${item.fd_name}`}
              </p>
              <p>
                {!item.fd_curriculumName ? "" : `${item.fd_curriculumName}`}
              </p>
              <p>
                {!item.fd_classRoomName ? "" : `${item.fd_classRoomName}---`}
                {!item.fd_claName ? "" : `${item.fd_claName}`}
              </p>
            </div>
          })
      }
    </>
  )

  // return (
  //   <>
  //     {
  //       newDataArray.map((item, index) => {
  //         return (
  //           item.map((item, index) => {
  //             return (
  //               <div className='course-table-cell'>
  //                 {item.teacher}----
  //                 {item.courseName}
  //                 <p>{item.classRoom}</p>
  //               </div>
  //             )
  //           })
  //         )
  //       })
  //     }
  //   </>
  // )
}
